<template>
  <div class="help-container">
    <div class="help-grid">
      <div class="help-item" v-for="(item, index) in helpItems" :key="index">
        <img :src="item.image" :alt="item.title">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Help',
  data() {
    return {
      helpItems: [
        {
          title: '售后服务',
          description: '快速解决您的售后问题',
          image: `${window.img}/other/x.jpg`
        },
        {
          title: '售后服务',
          description: '解答用户最常遇到的问题',
          image: `${window.img}/other/z.jpg`
        },
        {
          title: '系统问题',
          description: '获取专业的技术支持服务',
          image: `${window.img}/other/y.jpg`
        },
        {
          title: '界面问题',
          description: '更多帮助，请直接联系我们',
          image: `${window.img}/other/h.jpg`
        }
      ]
    }
  }
}
</script>

<style scoped>
.help-container {
  padding: 20px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 80%;
  margin: 0 auto;
}

.help-item {
  text-align: center;
  height: auto;
  width: 100%;
  padding: 30px;
  border-radius: 8px;
  background-color: #f5f5f5;
  transition: transform 0.3s ease;
}

.help-item:hover {
  transform: translateY(-5px);
}

.help-item img {
  width: 160px;
  height: 160px;
  margin-bottom: 20px;
}

.help-item h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 1.4em;
}

.help-item p {
  color: #666;
  font-size: 1.1em;
}

@media (max-width: 768px) {
  .help-grid {
    grid-template-columns: 1fr;
  }
}
</style>